<template>
  <div class="hello">
    <h1>{{ msg }}
      <h2>this is h2</h2>
    </h1>

    <h2>Essential Links</h2>

<div class="tip">this is tip </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$width:300px;
$height:200px;
@function fn($width){
  @return $width/2;
}
@mixin rounded-corner($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
}
.hello{
  h1{
    color:red;
    h2{
      color:blue;
      &:hover{
        color: yellowgreen;
      }
      }
    }
    h2{
    color:green;
  }
  .tip{
    color: brown;
    font: {
      size:20px;
      weight:bold;
      style:italic;
    }
    width:$width+height;
    height:fn(500px);
    background:gray;
    @include rounded-corner(50px);
    @if $width>200px{
color:yellow;
    }
    
  }
  }
  

</style>
